<template>
  <div class="dialog-box">
    <t-dialog
      :visible="props.visible"
      header="选择组件样式"
      :confirm-on-enter="true"
      :on-cancel="onCancel"
      :on-close="close"
      :on-confirm="ok"
      :cancelBtn="null"
      :confirmBtn="null"
    >
      <template #body>
        <div class="contents">
          <div class="contents-left">
            <div
              v-for="item in tabList"
              :key="item.id"
              @click="setCruuent(item.id)"
              class="item-box hw-click-cursor"
              :class="{ 'item-box-active': item.id == cruuent }"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="contents-right" id="contents-right">
            <t-radio-group v-model="ids" @change="onChange" style="width: 100%">
              <div class="right-item" :id="`content-1`" @mouseenter="mouseenter(1)" v-if="moduleList.preface">
                <div class="content-item">
                  <p class="item-title1">图文模块</p>
                  <span class="item-title2">通常用于「前言」「结语」等图文模块</span>
                </div>
                <t-row :gutter="24" style="width: 100%">
                  <t-col :span="4" v-for="item in moduleList.preface" :key="item.id">
                    <div
                      :class="{ 'active-radio': ids == item.id }"
                      @click="ids = item.id"
                      class="col-item hw-box-style-flex hw-box-style-flex-clm hw-box-style-flex-r-center"
                    >
                      <div class="pd-box">
                        <img :src="item.img + '?imageView2/3/format/webp'" alt="" class="block_15 flex-col" />
                      </div>
                      <div class="radio-check hw-flex-style-c-c">
                        <span>{{ item.name }}</span>
                        <img
                          v-if="ids == item.id"
                          class="item-active"
                          src="https://static.jiyi.show/assets/img/active.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </t-col>
                </t-row>
              </div>

              <div class="right-item" :id="`content-2`" @mouseenter="mouseenter(2)">
                <div class="content-item" v-if="props.unitList.length > 0">
                  <p class="item-title1">单元模块</p>
                  <span class="item-title2">用于单元下的模块，根据单元加载样式</span>
                </div>
                <div class="isnull" v-if="props.unitList?.length == 0">
                  <img src="https://static.jiyi.show/assets/img/no-module.png" alt="" />
                  <span>暂无组件样式</span>
                </div>
                <t-row :gutter="24" style="width: 100%">
                  <t-col @click="ids = item.id" :span="4" v-for="item in props.unitList" :key="item.id">
                    <div
                      :class="{ 'active-radio': ids == item.id }"
                      class="col-item hw-box-style-flex hw-box-style-flex-clm hw-box-style-flex-r-center"
                    >
                      <div class="pd-box">
                        <img :src="item.img + '?imageView2/3/format/webp'" alt="" class="block_15 flex-col" />
                      </div>
                      <div class="radio-check hw-flex-style-c-c">
                        <span>{{ item.name }}</span>
                        <img
                          v-if="ids == item.id"
                          class="item-active"
                          src="https://static.jiyi.show/assets/img/active.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </t-col>
                </t-row>
              </div>

              <div class="right-item" :id="`content-3`" @mouseenter="mouseenter(3)" v-if="moduleList.exhihits">
                <div class="content-item" v-if="moduleList.exhihits.length > 0">
                  <p class="item-title1">展品模块</p>
                  <span class="item-title2">通常用于单元下展品模块</span>
                </div>
                <div class="isnull" v-if="props.showpieceTotal < 2 || props.unitList.length > 0">
                  <img src="https://static.jiyi.show/assets/img/no-module.png" alt="" />
                  <span>暂无组件样式</span>
                </div>
                <t-row :gutter="24" style="width: 100%" v-else>
                  <t-col @click="ids = item.id" :span="4" v-for="item in moduleList.exhihits" :key="item.id">
                    <div
                      :class="{ 'active-radio': ids == item.id }"
                      class="col-item hw-box-style-flex hw-box-style-flex-clm hw-box-style-flex-r-center"
                    >
                      <div class="pd-box">
                        <img :src="item.img + '?imageView2/3/format/webp'" alt="" class="block_15 flex-col" />
                      </div>
                      <div class="radio-check hw-flex-style-c-c">
                        <span>{{ item.name }}</span>
                        <!-- <t-radio :value="item.id" 
                          ><span class="radio-text">{{ item.name }}</span></t-radio
                        > -->
                        <img
                          v-if="ids == item.id"
                          class="item-active"
                          src="https://static.jiyi.show/assets/img/active.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </t-col>
                </t-row>
              </div>
              <div class="right-item" :id="`content-3`" @mouseenter="mouseenter(3)" v-if="moduleList.stsyExhihits">
                <div class="content-item">
                  <p class="item-title1">展品模块</p>
                  <span class="item-title2">通常用于单元下展品模块</span>
                </div>
                <div class="isnull" v-if="props.showpieceTotal == 0 || props.unitList.length > 0">暂无可选展品模块</div>
                <t-row :gutter="24" style="width: 100%" v-else>
                  <t-col @click="ids = item.id" :span="4" v-for="item in moduleList.stsyExhihits" :key="item.id">
                    <div
                      :class="{ 'active-radio': ids == item.id }"
                      class="col-item hw-box-style-flex hw-box-style-flex-clm hw-box-style-flex-r-center"
                    >
                      <div class="pd-box">
                        <img :src="item.img + '?imageView2/3/format/webp'" alt="" class="block_15 flex-col" />
                      </div>
                      <div class="radio-check hw-flex-style-c-c">
                        <span>{{ item.name }}</span>
                        <!-- <t-radio :value="item.id" 
                          ><span class="radio-text">{{ item.name }}</span></t-radio
                        > -->
                        <img
                          v-if="ids == item.id"
                          class="item-active"
                          src="https://static.jiyi.show/assets/img/active.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </t-col>
                </t-row>
              </div>
            </t-radio-group>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="footer">
          <t-button @click="close" theme="default" variant="outline">取消</t-button>
          <t-button @click="ok">确定</t-button>
        </div>
      </template>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { moduleType } from '../data';
import { urls } from '@/utils/request/upload';
import { ref, reactive, getCurrentInstance, computed, watch } from 'vue';
import { dialogTab } from '../data';
import { useRoute } from 'vue-router';
const route = useRoute();
const tabList = ref([]);
const cruuent = ref(1);
const moduleList = ref([]);
let ids = ref(0);
const props = defineProps({
  visible: {
    type: Boolean,
  },
  value2: {
    type: Number,
  },
  unitList: {
    type: Array,
  },
  showpieceTotal: {
    type: Number,
  },
});
console.log(props.unitList);

const init = () => {
  // console.log('templateId', route.meta.templateId);

  switch (route.meta.templateId) {
    case 410276336631877:
      tabList.value = dialogTab;
      moduleList.value = moduleType;
      break;
    case 2001:
      tabList.value = dialogTab;
      moduleList.value = moduleType;

      break;
    case 2013:
      tabList.value = dialogTab;
      moduleList.value = moduleType;

      break;
    case 503306628902981:
      tabList.value = dialogTab;
      moduleList.value = moduleType;
      break;
    case 507481625702469:
      tabList.value = dialogTab;
      moduleList.value = moduleType;
      break;
    case 395740859879493: //模板一
      tabList.value = dialogTab;
      moduleList.value = moduleType;
      break;
    case 505022027386949: //模板一
      tabList.value = [
        {
          name: '子单元模块',
          id: 2,
        },
      ];

      break;
    case 1717:
      tabList.value = dialogTab;
      moduleList.value = moduleType;
      break;
    case 668849838567493:
      tabList.value = dialogTab;
      moduleList.value = moduleType;
      break;
    default:
      tabList.value = dialogTab;
      moduleList.value = moduleType;
      break;
  }
};
init();
const emit = defineEmits(['close', 'ok']);
ids.value = props.value2;
// console.log(ids.value);
watch(
  () => props.value2,
  () => {
    // console.log('变化');
    ids.value = props.value2;
  },
  { deep: true },
);
const close = () => {
  emit('close');
};
const ok = () => {
  emit('ok', ids.value);
};
const mouseenter = (e: number) => {
  cruuent.value = e;
  // console.log(e);
};
const onChange = (checkedValues) => {
  // console.log('checkedValues:', ids.value, checkedValues);
};
const onCancel = () => {};
const setCruuent = (e: any) => {
  cruuent.value = e;
  let ele = document.getElementById(`content-${e}`);
  ele.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
};
</script>

<style lang="less" scoped>
.dialog-box {
  :deep(.t-dialog--default) {
    padding: 0 !important;
  }

  :deep(.t-dialog) {
    width: 1160px !important;
    background: #ffffff;
    border-radius: 6px;
  }

  :deep(.t-dialog__header-content) {
    padding: 16px 0px;
    font-size: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 28px;
  }

  :deep(.t-dialog__header) {
    height: 60px;
    padding: 0 24px;
  }

  :deep(.t-dialog__body) {
    padding: 0;
  }

  :deep(.t-dialog__footer) {
    padding: 0;

    background: #ffffff;
  }

  :deep(.t-dialog__close) {
    padding-left: -32px;
    color: #ffffff;
  }

  :deep(.t-dialog__header) {
    padding-right: 32px;
    box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  }
  :deep(.t-row) {
    justify-content: flex-start !important;
    padding: 0px !important;
    width: calc(100% + 24px) !important;
    margin-left: -16px !important;
  }
}

.contents {
  display: flex;
  width: 100%;
  height: 614px;
}

.footer {
  padding: 16px 32px;
  // box-shadow: inset 0px 1px 0px 0px rgba(230, 230, 230, 0.5);
}

.contents-left {
  width: 144px;
  height: 100%;
  padding: 8px 0px;
  overflow-y: auto;

  background: #fff;
  box-shadow: inset -1px 0px 0px 0px #f0f0f0;
}

.contents-right {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 16px 24px;
  background: #fff;
  scrollbar-width: none;
}

.contents-right::-webkit-scrollbar {
  display: none;
}

.item-box {
  width: 100%;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
  text-align: center;
}

.item-box-active {
  background: #f5f5f5;
}

.right-item {
  width: 100%;
  //   height: 420px;
  margin-bottom: 24px;
}

.content-item {
  display: flex;
  align-items: flex-end;
}

.item-title1 {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}

.item-title2 {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-left: 4px;
  //   line-height: 22px;
}

.graphicModule-box {
  width: 100%;
}

.block_15 {
  width: 100%;
  height: auto;
  max-height: 172px;
}

.radio-text {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}

.pd-box {
  display: flex;
  align-items: center;
  // padding: 8px;
  width: calc(100% - 16px);
  height: 200px;
  background: #f5f5f5;
  border-radius: 4px;
  margin-top: 8px;
  img {
    width: 100%;
    height: auto;
    background: #f5f5f5;
    border-radius: 4px;
    object-fit: contain;
  }
}

.radio-check {
  position: relative;
  width: 100%;
  height: 40px;

  // border-top: 1px solid rgba(230, 230, 230, 0.5);
  span {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
  }

  .item-active {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 32px;
    height: 32px;
  }
}

.col-item {
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px -1px 2px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  border: 1px solid transparent;
  &:hover {
    border: 1px solid #e62b17;
  }
}

.isnull {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  // height: 400px;
  height: 520px;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 600;
  img {
    width: 188px;
    margin-bottom: 32px;
  }
  span {
    color: rgba(0, 0, 0, 0.38);
    font-family: 'PingFang SC';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
}
.active-radio {
  border: 1px solid rgba(230, 43, 23, 1);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px -1px 2px 0px rgba(0, 0, 0, 0.06);
}

:deep(.t-dialog) {
  border: none;
}

.t-row {
  margin-top: 16px;
  justify-content: flex-start;
}
</style>
